@import "../../common/css/theme";
.bgm-component {
    width: 80px;
    height: 80px;
    margin-bottom: 22px;
    .music-bg {
        background: $color-brand;
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
    }

    .music-status {
        display: flex;
        align-items: flex-end;
        height: 35px;
        .music-dot {
            width: 4px;
            float: left;
            margin-left: 4px;
            background-color: #fff;
            height: 35px;
            &:nth-of-type(1) {
                margin-left: 0;
                height: 16px
            }
            &:nth-of-type(2) {
                height: 27px
            }
            &:nth-of-type(3) {
                height: 21px
            }
            &:nth-of-type(4) {
                height: 15px
            }
            &:nth-of-type(5) {
                height: 27px
            }
            &:nth-of-type(6) {
                height: 32px
            }
        }
        &.play {
            .music-dot {
                &:nth-of-type(1) {
                    animation: play 0.6s linear infinite;
                }
                &:nth-of-type(2) {
                    animation: play 0.9s linear infinite;
                }
                &:nth-of-type(3) {
                    animation: play 0.7s linear infinite;
                }
                &:nth-of-type(4) {
                    animation: play 0.5s linear infinite;
                }
                &:nth-of-type(5) {
                    animation: play 0.9s linear infinite;
                }
                &:nth-of-type(6) {
                    animation: play 1.2s linear infinite;
                }
            }
        }
    }
    @keyframes play {
        0% {
            height: 8px
        }
        50% {
            height: 32px
        }
        100% {
            height: 12px
        }
    }
}
